<!-- 布匹-库存数 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="list-view">
			<u-list @scrolltolower="scrolltolower">
				<u-scroll-list :indicator="false" class="p-b-40">
					<view class="top-view p-t-20">
						<view class="flex flex-sa f-35 m-b-10">
							<view class="f-35">
								<view class="flex flex-c f-32 text-color"> 总匹数 </view>
								<view class="flex flex-c f-30 m-b-10"> {{total_data.canUsePiecesCount}} </view>
							</view>
							<view class="f-35">
								<view class="flex flex-c f-32 text-color"> 总成本 </view>
								<view class="flex flex-c f-30 m-b-10"> {{total_data.waitQuantityOut}}万 </view>
							</view>
							<view class="f-35">
								<view class="flex flex-c f-32 text-color"> 总米数 </view>
								<view class="flex flex-c f-30 m-b-10"> {{total_data.canUseQuantity}} </view>
							</view>
							<view class="f-35">
							  <view class="flex flex-c f-32 text-color"> 总公斤 </view>
							  <view class="flex flex-c f-30 m-b-10"> {{total_data.remainQuantity}} </view>
							</view>
						</view>
					</view>
				</u-scroll-list>
				<u-list-item v-for="(item,index) in list" :key="index">
					<view class="flex list-item" @click="toList(item)">
						<view class="flex img-view">
							<u-avatar
							    fontSize="14"
							    randomBgColor
							    :text="item.storeName.substring(0,2)"
							></u-avatar>
						</view>
						<view class="con-view">
							<view class="title-view f32 m-b-10">
								{{item.storeName}}
							</view>
							<view class="flex bot-view m-b-10">
								<view class="l-view">
									<text class="gray m-r-10">总成本</text>
									<text>{{item.totalCostPrice||0}}万</text>
								</view>
							</view>
							<view class="flex bot-view m-b-10">
								<view class="item-view">
									<text class="gray m-r-10">总匹数</text>
									<text>{{item.quantity}}</text>
								</view>
								<view class="item-view">
									<text class="gray m-r-10">总米数</text>
									<text>0</text>
								</view>
								<view class="item-view">
									<text class="gray m-r-10">总公斤</text>
									<text>0</text>
								</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<!-- 筛选弹框 -->
		<u-popup :show="show" class="sidebar" mode="right" overlayOpacity="0.3" @close="onClose">
		    <view class="pop-view">
				<view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;" @click="toWarehouse">
							<view class="title">
								仓库
							</view>
							<view class="value">
								{{sideObj.storeName}}
							</view>
						</view>
						<view class="icon">
							<u-icon name="close" color="#999" size="20" v-if="sideObj.storeName" @click="sideObj.storeName=''"></u-icon>
							<u-icon name="arrow-right" color="#999" v-else></u-icon>
						</view>
					</view>
				</view>
				
				
				
		        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
		        	<u-button text="重置" shape="circle" class="reset m-r-10" @click="onReset"></u-button>
					<u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))" @click="onSearch"></u-button>
		        </view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import {listGroupByStorePage, listPageFooting} from '@/apis/inventory/inventory.js'
	export default {
		name: '',
		data() {
			return {
				config: {
				  title: "布匹-库存数",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				show: false,
				params: {
					data: {},
					page: {
						current: 1,
						size: 999
					}
				},
				// 列表数据
				list: [],
				// 总数
				total_data: {},
				// 筛选条件
				sideObj: {
					storeName: ''
				}
			}
		},
		onLoad() {
			// 库存
			uni.$on('on-warehouse-data',(res)=>{
				let {name, id} = res;
				if(this.show) {
					this.sideObj.storeName = name;
					this.sideObj.storeId = id;
				}
			})
			// 产品
			
		},
		onUnLoad() {
			uni.$off('on-warehouse-data')
		},
		methods: {
			// 去选择仓库
			toWarehouse() {
				this.$Router.push({
				  path: "/pages/application/pages/information/warehouse/warehouse",
				  query: {
				    type: 'list'
				  }
				});
			},
			// 重置
			onReset() {
				this.sideObj = {
					storeName: '',
					name: ''
				}
			},
			// 搜索
			onSearch() {
				this.params.data = this.sideObj;
				this.onClose()
			},
			onClose() {
			  this.show = false
			  this.params.page.current = 1;
			  this.getList()
			},
			clickBtn(item) {
				if (item.key === "btn1") {
					this.show = true
				}
			},
			close() {
			  this.show = false
			},
			getList() {
				listGroupByStorePage(this.params).then(res=>{
					if (!res.flag) return;
					this.list = this.params.page.current == 1?res.data.records:[...res.data.records,...this.list]
				})
				listPageFooting(this.params).then(res=>{
					if (!res.flag) return;
					this.total_data = res.data;
				})
			},
			
			scrolltolower() {
				
			},
			toList(val) {
				let { storeId, storeName} = val
				uni.navigateTo({
					url:`/pages/application/pages/cloth/inventory/matching/quantity/overview?storeId=${storeId}&storeName=${storeName}`
				})
			}
		},
		mounted() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
	}
	.list-item {
		margin: 0 40rpx 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 4rpx 6rpx 16rpx #c7c7c7;
		align-items: center;
		.img-view {
			width: 90rpx;
			height: 90rpx;
			overflow: hidden;
			border-radius: 100%;
			// background-color: #03A9F4;
			align-items: center;
			justify-content: center;
			color: #fafafa;
			margin-right: 24rpx;
			.store-name {
				width: 56rpx;
				height: 40rpx;
				overflow: hidden;
			}
		}
		.con-view {
			flex: 1;
			.title-view {
				color: #333;
				font-weight: bold;
			}
			.l-view {
				flex: 1;
			}
			.bot-view {
				flex-wrap: wrap;
			}
			.item-view {
				width: 50%;
				margin-bottom: 10rpx;
			}
			.gray { color: #999;}
			
		}
	}
	.pop-view {
		width: 500rpx;
		padding-top: 88rpx;
		.fot-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding-bottom: 20rpx;
		}
		.reset {
			color: #409eff;
			background-color: #e3edff;
		}
	}
</style>